<template>
  <div class="sale">
    <Search
      str1="在售价最低"
      str2="月销量最高"
      str3="请输入商品ID或名称"
      @myEvent="query"
      @sort1="sort1"
      @sort2="sort2"
      @sort3="sort3"
    >
    </Search>
    <div class="tableList">
      <el-table
        :data="useStore.goodsList"
        style="width: 100%"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column type="selection" width="40" style="color: black" />
        <el-table-column prop="id" label="商品ID" width="80" />
        <el-table-column label="商品图片" prop="productimg" width="80">
          <template v-slot="scope">
            <img
              :src="scope.row.productimg"
              alt=""
              style="width: 45px; height: 43px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="productname" label="商品标题" width="200" />
        <el-table-column prop="producttype" label="所属分类" />
        <el-table-column prop="price" label="在售价" />
        <el-table-column prop="estimatedincome" label="预估收益" />
        <el-table-column prop="monthlysales" label="月销量" />
        <el-table-column prop="stock" label="库存" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button style="background: rgb(23, 28, 73)">上架</el-button>
            <el-button style="background: rgb(245, 108, 108)">删除</el-button>
            <el-button
              style="background: rgb(33, 61, 192)"
              @click="editDetail(scope.$index)"
              >详情/编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bot">
      <Footer
        str1="今日入库"
        str2="所有商品"
        ref="refFooter"
        :total="total"
        :pageSizes="pageSize"
        btnStr="一键上架"
        @myEvent2="pageNext"
        @myEvent3="pagePrev"
      ></Footer>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Search from "@/components/Search.vue";
import Footer from "@/components/Footer.vue";
import { useStoreSum } from "@/stores/sum.js";
import { getGoodsList, getGoodsId, getGoodsPrice } from "@/api/goodsData.js";
import { sortBy } from "@/utils/sortArr.js";

const router = useRouter();

const useStore = useStoreSum();

const refFooter = ref("");

const total = ref(1);
const pageSize = ref(1);


onMounted(() => {
  getGoodsData();
});

//获取图片
async function getGoodsData(page) {
  const res = await getGoodsList(page);
  total.value = res.data.total;
  useStore.goodsList = res.data.items;
  pageSize.value = 10;
  console.log(useStore.goodsList);
}

//查看详情
function editDetail(index) {
  console.log(index);
  router.push({
    path: "/commodity/detail",
    query: {
      index,
    },
  });
}

//查询函数
async function query() {
  //获取输入的商品id
  let goodsId = document.querySelector("#goodsId").value;
  //获取最低金额
  let lowCount = document.querySelector("#lowCount").value;
  //获取最高金额
  let heightCount = document.querySelector("#heightCount").value;
  if (goodsId !== "") {
    const res = await getGoodsId(goodsId);
    useStore.goodsList = Array(res.data.info);
    console.log(res);
  }

  if(lowCount !== "" && heightCount !== ""){
    const res = await getGoodsPrice(lowCount , heightCount );
    useStore.goodsList = res.data.items;
    console.log(res);
  }
  if(lowCount === "" && heightCount === "" && goodsId === ""){
    getGoodsData();
  }

}

//下一页
function pageNext() {
  getGoodsData(refFooter.value.pageNum, pageSize.value);
}

// 上一页
function pagePrev() {
  getGoodsData();
}

//默认排序
function sort1(){
  getGoodsData(refFooter.value.pageNum, pageSize.value);
}

//按照最低售价排序
function sort2(){
  const newArr = useStore.goodsList.sort(sortBy("price"));
  useStore.goodsList = newArr;
}

//按照月销量排序
function sort3(){
  const newArr = useStore.goodsList.sort(sortBy("monthlysales"));
  useStore.goodsList = newArr;
}
</script>

<style lang="less" scoped>
.sale {
  .tableList {
    margin-top: 30px;
    box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
    .el-table {
      --el-table-border: 0;
      text-align: center;
      .el-button {
        color: white;
      }
    }
  }
}

</style>
